<%--
  Created by IntelliJ IDEA.
  User: cloudoer
  Date: 2018/4/12
  Time: 11:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="admin_type_div" style="padding: 10px;">
    <div class="layui-btn-group" style="margin: 10px 0;">
        <button id="admin_type_add" class="layui-btn">增加</button>
    </div>
    <table id="admin_type_table" lay-filter="admin_type_table"></table>
</div>

<script type="text/html" id="admin_type_toolbar">
    <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="admin_type_update">修改</a>
    <a class="layui-btn layui-btn-radius layui-btn-danger layui-btn-xs" lay-event="admin_type_delete">删除</a>
</script>

<script type="text/javascript">
    var _admin_type_js = {
        layer_index : null,
        table: null,
        layer: null,
        form: null,
        table_data_init: function () {
            _admin_type_js.table.render({
                elem: '#admin_type_table',
                //height: 800,
                url: '/type/getAll.action',
                cols: [[
                    {field: 'id', title: 'ID'},
                    {field: 'name', title: '名称'},
                    {field: 'value', title: '值'},
                    {fixed: 'right', title: '操作', align: 'center', toolbar: '#admin_type_toolbar'}
                ]]
            });
        },
        table_toolbar_init: function () {
            _admin_type_js.table.on('tool(admin_type_table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'admin_type_delete'){ //删除
                    _admin_type_js.layer.confirm('真的删除行么', function(index){
                        $.get('/type/delete.action',{id:data.id},function (data,status) {
                            if (data.flag == 'success'){
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                _admin_type_js.layer.msg(data.message,{icon:6});
                            }else {
                                _admin_type_js.layer.msg(data.message,{icon:5});
                            }
                        });
                        _admin_type_js.layer.close(index);
                    });
                } else if(layEvent === 'admin_type_update'){ //编辑
                    $.post('/type/updateUI.action', function(str){
                        _admin_type_js.layer_index = _admin_type_js.layer.open({
                            id: 'type_dialog',
                            type: 1,
                            title:'修改类型',
                            area: ['500px', '500px'],
                            content: str, //注意，如果str是object，那么需要字符拼接。
                            success: function (layero, index) {
                                $('#type_add_id').val(data.id);
                                $('#type_add_name').val(data.name);
                                $('#type_add_value').val(data.value);
                            }
                        });
                    });
                    //同步更新缓存对应的值
                    // obj.update({
                    //     name: 'xxx'
                    //     ,number: '123'
                    // });
                }
            });
        },
        form_init: function () {
            _admin_type_js.form.on('submit(type_add_btn)', function (data) {
                $.post('/type/add.action', data.field, function (data, status) {
                    if (data.flag == 'success') {
                        _admin_type_js.table_data_init();
                        _admin_type_js.layer.close(_admin_type_js.layer.index);
                        _admin_type_js.layer.msg(data.message,{icon:6});
                    }else {
                        _admin_type_js.layer.msg(data.message,{icon:5});
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            _admin_type_js.form.on('submit(type_update_btn)', function (data) {
                $.post('/type/update.action', data.field, function (data, status) {
                    if (data.flag == 'success') {
                        _admin_type_js.table_data_init();
                        _admin_type_js.layer.close(_admin_type_js.layer.index);
                        _admin_type_js.layer.msg(data.message,{icon:6});
                    }else {
                        _admin_type_js.layer.msg(data.message,{icon:5});
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

        },
        btn_init: function () {
            $('#admin_type_add').on('click', function () {
                $.post('/type/addUI.action', function (str) {
                    _admin_type_js.layer_index = _admin_type_js.layer.open({
                        id: 'type_dialog',
                        type: 1,
                        title: '添加',
                        area: ['500px', '500px'],
                        content: str //注意，如果str是object，那么需要字符拼接。
                    });
                });
            });
        }
    }

    var admin_type_app = (function () {
        $(function () {
            layui.use(['table','layer','form'], function(){
                _admin_type_js.table = layui.table;
                _admin_type_js.layer = layui.layer;
                _admin_type_js.form = layui.form;

                _admin_type_js.table_data_init();
                _admin_type_js.table_toolbar_init();
                _admin_type_js.form_init();
                _admin_type_js.btn_init();
            });
        });
    })();
</script>